<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <title></title>
    <style>
        *{
             margin: 0;
             padding: 0;
            list-style: none;
         }

        a{
            text-decoration: none;
            color:#fff;
        }

        .layout{
            width: 100%;
            /* 最小宽度 320px*/
            min-width: 320px;
        }
        header a img {
        width: 100%;
        /* 解决图片 下面有3px的边距 */
        display: block;
    }
    nav .item {
        display: flex;
        height: 90px;
        margin-top: 10px;
        border-radius: 10px;
        background-color: deeppink;
    }
    nav .item:nth-child(2) {
        background-color: deepskyblue;
    }
    nav .item:nth-child(3) {
        background-color: orangered;
    }

        nav .item:nth-child(4) {
            background-color: #daa520;
        }

        nav .item .pub {
            flex: 1;
            border-right: 1px solid white;
        }
        nav .item .sub {
            flex: 2;
        }
        nav .item .sub a {
            float: left;
            width: 50%;
            height: 45px;
            text-align: center;
            line-height: 45px;
            border-bottom: 1px solid white;
            border-right: 1px solid white;
            box-sizing: border-box;
        }
        nav .item:nth-child(4) a {
            width: 33.33%;
        }
        .extra {
            display: flex;
        }
        .extra a {
            flex: 1;
        }
        .extra img {
            width: 100%;
        }
        footer section {
            display: flex;
            border-top: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
        }
        footer section a {
            flex: 1;
            padding: 20px 0;
            color: #333;
            text-align: center;
        }
        .copyright {
            text-align: center;
        }
        .copyright p {
            height: 40px;
            line-height: 40px;
        }
        .copyright a{
            color:#333
        }
    </style>
</head>
<body>
    <div class="layout">
        <header>
            <a href="#">
                <img src="images/banner.jpg" alt=""/>
            </a>
        </header>
        <nav class="nav">
            <div class="item">
                <div class="pub"></div>
                <div class="sub">
                    <a href="javascript:;">海外酒店</a>
                    <a href="javascript:;">团购</a>
                    <a href="javascript:;">特惠酒店</a>
                    <a href="javascript:;">客栈公寓</a>
                </div>
            </div>
            <div class="item">
                <div class="pub"></div>
                <div class="sub">
                    <a href="javascript:;">火车票</a>
                    <a href="javascript:;">汽车票船票</a>
                    <a href="javascript:;">国际机票</a>
                    <a href="javascript:;">自驾专车</a>
                </div>
            </div>
            <div class="item">
                <div class="pub"></div>
                <div class="sub">
                    <a href="javascript:;">攻略身边</a>
                    <a href="javascript:;">邮轮</a>
                    <a href="javascript:;">周末游</a>
                    <a href="javascript:;">保险签证</a>
                </div>
            </div>
            <div class="item">
                <div class="sub">
                    <a href="javascript:;">门票玩乐</a>
                    <a href="javascript:;">美食</a>
                    <a href="javascript:;">全球购</a>
                    <a href="javascript:;">礼品卡</a>
                    <a href="javascript:;">出境WIFI</a>
                    <a href="javascript:;">更多</a>
                </div>
            </div>
        </nav>
        <!--  其他 模块-->
        <section class="extra">
            <a href="javascript:;">
                <img src="./images/extra_1.png">
            </a>
            <a href="javascript:;">
                <img src="./images/extra_2.png">
            </a>
        </section>

        <!--  底部-->
        <footer>
            <!-- 底部导航 -->
            <section>
                <a href="javascript:;">电话预订</a>
                <a href="javascript:;">下载客户端</a>
                <a href="javascript:;">我的</a>
            </section>
            <!-- 版本信息 -->
            <div class="copyright">
                <!-- 网站链接 -->
                <p class="link">
                    <a href="javascript:;">网站地图</a> |
                    <a href="javascript:;">ENGLISH</a> |
                    <a href="javascript:;">电脑版</a>
                </p>
                <p>©2015 携程旅行</p>
            </div>
        </footer>
    </div>
</body>
</html>